<template>
  <div>
    <el-form :model="user" label-width="70px" label-position="left">
      <el-form-item label="用户名" prop="username">
        <el-input
            v-model="user.username"
            disabled
            style="width: 300px"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" style="width: 300px">
        <el-input v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name" style="width: 300px">
        <el-input v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="telephone" style="width: 300px">
        <el-input v-model="user.telephone"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="handleEdit">修改用户信息</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { update } from '../services/User.ts';
import { ElMessage } from 'element-plus';

interface User {
  userid: string;
  username: string;
  password: string;
  name: string;
  telephone: string;
}

export default defineComponent({
  name: 'User',

  setup() {
    const user = ref<User>({
      userid: "",
      username: "",
      password: "",
      name: "",
      telephone: "",
    });

    onMounted(() => {
      const storedUser = localStorage.getItem("user");
      if (storedUser) {
        user.value = JSON.parse(storedUser);
      }
    });

    const handleEdit = () => {
      update(user.value).then(() => {
        ElMessage.success("修改用户信息成功");
        localStorage.setItem("user", JSON.stringify(user.value));
      });
    };

    return {
      user,
      handleEdit,
    };
  },
});
</script>

<style lang="css" scoped></style>
